<template>
  <div class="box mt20 p20">
    <el-row class="mb10" v-for="(item, index) in todoList" type="flex" justify="center" align="middle" :gutter="10">
        <el-col :span="8"> 
            <span v-if="item.state === 2" >
                <el-row :gutter="5" >
                    <el-col :span="22" >
                        <el-input v-model.trim="item.value" placeholder="请输入Todo内容"></el-input>
                    </el-col>
                    <el-col :span="2" ><el-button type="success" @click="$emit('edit-complete', index)" icon="el-icon-check" circle></el-button></el-col>
                </el-row>
            </span>
            <span v-else >待做: {{item.value}}</span>
        </el-col>
        <el-col :span="8">创建事件: {{item.createTime}} </el-col>
        <el-col :span="8"> 
            <el-button :disabled="stateHandle(item.state)" type="success" @click="$emit('edit-todo', index)" >编辑</el-button>
            <el-button @click="$emit('todo-state-change', index)" :disabled="item.state === 2" type="primary" >{{ stateText[item.state] }}</el-button>
            <el-button @click="$emit('todo-delete', index)" type="danger" >删除</el-button>
        </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" >
import { ref, reactive, computed } from "vue";

export default {
  emits: ["update:todoList", "edit-todo", "edit-complete", "todo-state-change", "todo-delete"],
  props: {
    todoList: Array,
  },
  setup(props, { attrs, slots, emit }) {
    const stateText = reactive({
        0: "完成",
        1: "未完成",
        2: "编辑中"
    });

    const stateHandle = (state: number):boolean => {
        return (state === 2 || state === 1) ? true : false;
    };  


    return {
        stateText,
        stateHandle
    }
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
@import url("../assets/css/common.less");

.box {
  border: 1px solid @deep-violet;
  height: 50vh;
}

ul {
  list-style: none;
}
</style>